<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="utf-8"/>
    <title>个人信息</title>
    <link rel="stylesheet" type="text/css" href="../../css/public.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/mygrxx.css"/>
</head>
<body>
<div th:replace="~{front/public/topmargin::topbar}"></div>
<!--		&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;head&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;-->
<!--		<div class="head ding">-->
<!--			<div class="wrapper clearfix">-->
<!--				<div class="clearfix" id="top">-->
<!--					<h1 class="fl"><a href="index"><img src="../../img/logo2.png"/></a></h1>-->
<!--					<div class="fr clearfix" id="top1">-->
<!--						<p class="fl">-->
<!--							<a href="login" id="login">登录</a>-->
<!--							<a href="reg" id="reg">注册</a>-->
<!--						</p>-->
<!--						<form action="#" method="get" class="fl">-->
<!--							<input type="text" placeholder="搜索" />-->
<!--							<input type="button" />-->
<!--						</form>-->
<!--						<div class="btn fl clearfix">-->
<!--							<a href="mygxin"><img src="../../img/grzx.png"/></a>-->
<!--							<a href="#" class="er1"><img src="../../img/ewm.png"/></a>-->
<!--							<a href="cart"><img src="../../img/gwc.png"/></a>-->
<!--							<p><a href="#"><img src="../../img/smewm.png"/></a></p>-->
<!--						</div>-->
<!--					</div>-->
<!--				</div>-->
<!--				<ul class="clearfix" id="bott">-->
<!--					<li><a href="index">首页</a></li>-->
<!--					<li>-->
<!--						<a href="#">所有商品</a>-->
<!--						<div class="sList">-->
<!--							<div class="wrapper  clearfix">-->
<!--								<a href="paint">-->
<!--									<dl>-->
<!--										<dt><img src="../../img/nav1.jpg"/></dt>-->
<!--										<dd>浓情欧式</dd>-->
<!--									</dl>-->
<!--								</a>-->
<!--								<a href="paint">-->
<!--									<dl>-->
<!--										<dt><img src="../../img/nav2.jpg"/></dt>-->
<!--										<dd>浪漫美式</dd>-->
<!--									</dl>-->
<!--								</a>-->
<!--								<a href="paint">-->
<!--									<dl>-->
<!--										<dt><img src="../../img/nav3.jpg"/></dt>-->
<!--										<dd>雅致中式</dd>-->
<!--									</dl>-->
<!--								</a>-->
<!--								<a href="paint">-->
<!--									<dl>-->
<!--										<dt><img src="../../img/nav6.jpg"/></dt>-->
<!--										<dd>简约现代</dd>-->
<!--									</dl>-->
<!--								</a>-->
<!--								<a href="paint">-->
<!--									<dl>-->
<!--										<dt><img src="../../img/nav7.jpg"/></dt>-->
<!--										<dd>创意装饰</dd>-->
<!--									</dl>-->
<!--								</a>-->
<!--							</div>-->
<!--						</div>-->
<!--					</li>-->
<!--					<li>-->
<!--						<a href="flowerDer">装饰摆件</a>-->
<!--						<div class="sList2">-->
<!--							<div class="clearfix">-->
<!--								<a href="proList">干花花艺</a>-->
<!--								<a href="vase_proList">花瓶花器</a>-->
<!--							</div>-->
<!--						</div>-->
<!--					</li>-->
<!--					<li>-->
<!--						<a href="decoration">布艺软饰</a>-->
<!--						<div class="sList2">-->
<!--							<div class="clearfix">-->
<!--								<a href="zbproList">桌布罩件</a>-->
<!--								<a href="bzproList">抱枕靠垫</a>-->
<!--							</div>-->
<!--						</div>-->
<!--					</li>-->
<!--					<li><a href="paint">墙式壁挂</a></li>-->
<!--					<li><a href="perfume">蜡艺香薰</a></li>-->
<!--					<li><a href="idea">创意家居</a></li>-->
<!--				</ul>-->
<!--			</div>-->
<!--		</div>-->
<!------------------------------idea------------------------------>
<div class="address mt">
    <div class="wrapper clearfix">
        <a href="index" class="fl">首页</a>
        <span>/</span>
        <a href="mygxin" class="on">个人信息</a>
    </div>
</div>

<!------------------------------Bott------------------------------>
<div class="Bott">
    <div class="wrapper clearfix">
        <div class="zuo fl">
            <h3>
                <a href="#"><img id="img-avatar1" src="../../img/tx.png" width="90px" height="90px"/></a>

                <p class="clearfix"><span type="text" class="fl" style="font-size: 15px" id="usernameDouble"></span><span  class="fr"  ><a th:href="@{/front/logout}"  >[退出登录]</a></span></p>
            </h3>
            <div>
                <h4>我的交易</h4>
                <ul>
                    <li><a href="cart">我的购物车</a></li>
                    <li><a href="myorderq">我的订单</a></li>
                    <li><a href="myprod">评价晒单</a></li>
                </ul>
                <h4>个人中心</h4>
                <ul>
                    <li><a href="mygxin">我的中心</a></li>
                    <li><a href="address">地址管理</a></li>
                    <li><a href="release">商品发布</a></li>
                </ul>
                <h4>账户管理</h4>
                <ul>
                    <li class="on"><a href="mygrxx">个人信息</a></li>
                    <li><a href="remima">修改密码</a></li>
                </ul>
            </div>
        </div>
        <!--				<div th:replace="~{front/public/sidebar::leftbar}"></div>-->
        <div class="you fl">
            <h2>个人信息</h2>
            <div class="gxin">
                <div class="tx"><a href="#"><img id="img-avatar" width="90px" height="90px"/>
                    <p id="avatar">修改头像</p></a></div>
                <div class="xx">
                    <h3 class="clearfix"><strong class="fl">基础资料</strong><a href="#" class="fr" id="edit1">编辑</a></h3>
                    <!--							<div>姓名：<span th:text="${session.username}"></span></div>-->
                    <!--							<div>邮箱：<span th:text="${session.email}"></span></div>-->
                    <!--							<div>性别：<span th:text="${session.sex==0?'女':'男'}"></span></div>-->
                    <!--							<div>手机：<span th:text="${session.phone}"></span></div>-->
                    <div>姓名: <input style="text-align: center" type="text" disabled="disable" id="usernameAgain"
                                    name="username"></div>
                    <div>邮箱: <input style="text-align: center" type="text" disabled="disabled" id="emailAgain"
                                    name="email"/></div>
                    <div>性别: <input style="text-align: center" type="text" disabled="disabled" id="sexAgain"
                                    name="sex"/></div>
                    <div>手机: <input style="text-align: center" type="text" disabled="disabled" id="phoneAgain"
                                    name="phone"/></div>
                    <h3>高级设置</h3>
<!--                    <button type="button" id="del" value="注销账号">注销账号</button>-->
                    <p><input  style=
                                       "width:100px;
						            background-color: #C10000;
						            font-size: 15px;
						            border:none;
						            color:#fff;"
                               type="button"  name="" id="del" value="注销账号"></p>
                </div>
            </div>
        </div>
    </div>
</div>
<!--遮罩-->
<div class="mask"></div>
<!--编辑弹框-->
<div class="bj">
    <div class="clearfix"><a href="#" class="fr gb"><img src="../../img/icon4.png"/></a></div>
    <h3>编辑基础资料</h3>
    <form action="" id="form-changUserInfo">
        <p><label>姓名：</label><input type="text" name="username" id="username" value=""/></p>
        <p><label>邮箱：</label><input type="text" name="email" id="email"/></p>
        <p>
            <label>性别：</label>
            <span><input id="male" name="sex" type="radio" value="1"/>男</span>
            <span><input id="female" name="sex" type="radio" value="0"/>女</span>
        </p>
        <p><label>手机：</label><input name="phone" id="phone" type="text"/></p>
        <div class="bc">
            <input type="button" id="btn-change-info" value="保存"/>
            <input type="button" value="取消"/>
        </div>
    </form>
</div>
<!--高级设置修改-->
<div class="xg">
    <div class="clearfix"><a href="#" class="fr gb"><img src="../../img/icon4.png"/></a></div>
    <h3>切换账号地区</h3>
    <form action="#" method="get">
        <p><label>姓名：</label><input type="text" value="六六六"/></p>
        <div class="bc">
            <input type="button" value="保存"/>
            <input type="button" value="取消"/>
        </div>
    </form>
</div>
<!--修改头像-->
<div class="avatar">
    <div class="clearfix"><a href="#" class="fr gb"><img src="../../img/icon4.png"/></a></div>
    <h3>修改头像</h3>
    <form action="/change_avatar" id="form-changePhoto" method="post" enctype=multipart/form-data>
        <h4>请上传图片</h4>
        <input name="file" type="file" value="上传头像"/>
        <p>jpg或png，大小不超过2M</p>
        <input type="button" id="btn-changePhoto" value="提交"/>
    </form>
</div>

<!--返回顶部-->
<div th:replace="~{front/public/gotop::endbar}"></div>
<!--footer-->
<div class="footer">
    <div class="top">
        <div class="wrapper">
            <div class="clearfix">
                <a href="#2" class="fl"><img src="../../img/foot1.png"/></a>
                <span class="fl">7天无理由退货</span>
            </div>
            <div class="clearfix">
                <a href="#2" class="fl"><img src="../../img/foot2.png"/></a>
                <span class="fl">15天免费换货</span>
            </div>
            <div class="clearfix">
                <a href="#2" class="fl"><img src="../../img/foot3.png"/></a>
                <span class="fl">满599包邮</span>
            </div>
            <div class="clearfix">
                <a href="#2" class="fl"><img src="../../img/foot4.png"/></a>
                <span class="fl">手机特色服务</span>
            </div>
        </div>
    </div>
    <p class="dibu">最家家居&copy;2013-2017公司版权所有 京ICP备080100-44备0000111000号<br/>
        违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
</div>
<script src="../../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/public.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/user.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../../js/sweetalert.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            url: "/getUserInfo",
            type: "GET",
            dataType: "json",
            success: function (json) {
                if (json.state == 200) {
                    console.log("username=" + json.data.username);
                    console.log("phone=" + json.data.phone);
                    console.log("email=" + json.data.email);
                    console.log("sex=" + json.data.sex);

                    console.log("usernameAgain=" + json.data.username)

                    $("#username").val(json.data.username);
                    $("#phone").val(json.data.phone);
                    $("#email").val(json.data.email);

                    let radio = json.data.sex == 0 ? $("#female") : $("#male");
                    radio.prop("checked", "checked");


                    $("#usernameAgain").val(json.data.username)
                    $("#phoneAgain").val(json.data.phone)
                    // $("#sexAgain").val(json.data.sex)
                    $("#emailAgain").val(json.data.email)

                    $("#usernameDouble").text(json.data.username)

                    let text = json.data.sex == 0 ? $("#sexAgain").val("女") : $("#sexAgain").val("男");

                } else {
                    alert("获取用户信息失败！" + json.message);
                }
            }
        });
    });

    $("#btn-change-info").click(function () {
        $.ajax({
            url: "/changeUserInfo",
            type: "POST",
            data: $("#form-changUserInfo").serialize(),
            dataType: "json",
            success: function (json) {
                if (json.state == 200) {
					swal({
						title: '修改成功',
						icon: 'success'
					}).then(function () {
						location.href = "mygrxx"
					})
                    // alert("修改成功！");
                    // location.href = "mygrxx";
                } else {
					swal({
						title: '修改失败',
						icon: 'warning',
						text: json.message,
						button: {
							text: "确认",
							value: true,
						}
					}).then(function (isok) {
						if (isok) {
							location.href = "mygrxx"
						}
					})
                    // alert("修改失败！" + json.message);
                }
            }
        });
    });


    $(document).ready(function () {
        console.log("cookie中的avatar=" + $.cookie("photo"));
        $("#img-avatar").attr("src", $.cookie("photo"));
        $("#img-avatar1").attr("src", $.cookie("photo"));

        $.ajax({
            url: "/getUserInfo",
            type: "GET",
            dataType: "json",
            success: function(json) {
                if (json.state == 200) {
                    console.log("username=" + json.data.username);
                    console.log("email=" + json.data.email);
                    $("#username").val(json.data.username);
                    $("#email").val(json.data.email);
                    $("#usernameDouble").text(json.data.username)
                } else {
                    alert("获取用户信息失败！" + json.message);
                }
            }
        });
    });


    // $("#btn-changePhoto").click(function() {
    // 	console.log(22222222)
    // 	$.cookie("photo", "1111", {expires: 7});
    // 	console.log($.cookie("photo"))
    // 	debugger
    // })

    $("#btn-changePhoto").click(function () {
        console.log(111111)
        $.ajax({
            url: "/change_avatar",
            type: "POST",
            data: new FormData($("#form-changePhoto")[0]),
            dataType: "JSON",
            processData: false, // processData处理数据
            contentType: false, // contentType发送数据的格式
            success: function (json) {
                if (json.state == 200) {
					swal({
						title: '修改成功',
						icon: 'success'
					}).then(function () {
						$("#img-avatar").attr("src", json.data);
						$("#img-avatar").attr("src", $.cookie("photo"));
						$.cookie("photo", json.data, {expires: 7, path: "/"});
						location.href = "mygrxx"
					});
                    // console.log($.cookie("photo"))
                    // debugger
                } else {
					swal({
						title: '修改失败',
						icon: 'warning',
						text: json.message,
						button: {
							text: "确认",
							value: true,
						}
					}).then(function (isok) {
						if (isok) {
							location.href = "mygrxx"
						}
					})
                    // alert("修改失败！" + json.message);
                }
            },
        });
    });

</script>
</body>

</html>
